<template>
  <!-- 解析页面 -->
  <div class="paper_exam">
    <!--勿随意改动 , 否则会导致N个 property  xxx of undefined 需要N个 && 弥补-->
    <div
      class="container"
      v-if="paper_config.paper_info.paper_id || (paper_config.paper_info.st_list&&paper_config.paper_info.st_list.length!==0)"
    >
      <div class="mt-20 pl-20 c-666">
        <span class="md fz16 align-y-top mr-4">content_copy</span>
        {{ paper_config.paper_info.lb }} / {{ paper_config.paper_info.sj_name }}
      </div>
      <Row :gutter="15" class="mt-20">
        <Col span="17-5 ">
          <div class="p-panel paper-main">
            <div class="text-center paper-info">
              <div class="fz20 fw-bold">
                {{ paper_config.paper_info.sj_name }}
              </div>
              <div class="c-aaa mt-8">
                单项选择题{{ paper_config.single_Q_info.zs }}题，共{{
                  paper_config.single_Q_info.fz
                }}分; 多项选择题{{ paper_config.multiple_Q_info.zs }}题，共{{
                  paper_config.multiple_Q_info.fz
                }}分; 总计{{
                  paper_config.single_Q_info.fz * 1 +
                  paper_config.multiple_Q_info.fz * 1
                }}分。
              </div>
            </div>
            <!--单选题-->
            <div
              class="Q-panel pos-rel"
              v-if="paper_config.single_Q_json.length !== 0"
            >
              <div class="Q-info bg-0084B3 fz14 c-fff">
                单项选择题（{{ paper_config.single_Q_info.zs }}题，{{
                  paper_config.single_Q_info.fz
                }}分）
              </div>
              <div>
                <single-Q
                :request_id="request_id"
                  class="cmm"
                  v-for="(item, index) in paper_config.single_Q_json"
                  :key="index"
                  :Q="item"
                  :id="'single' + item.xh"
                />
              </div>
            </div>
          </div>
          <!--多选题 , 分离panel-->
          <div
            class="p-panel mt-10 Q-panel pos-rel"
            v-if="paper_config.multiple_Q_json.length !== 0"
          >
            <div class="Q-info bg-0084B3 fz14 c-fff">
              多项选择题（{{ paper_config.multiple_Q_info.zs }}题，{{
                paper_config.multiple_Q_info.fz
              }}分）
            </div>
            <div>
              <multiple-Q
                class="cmm"
                :request_id="request_id"
                v-for="(item, index) in paper_config.multiple_Q_json"
                :key="index"
                :Q="item"
                :id="'multiple' + item.xh"
              />
            </div>
          </div>
          <!--材料题 , 分离panel-->
          <div
            class="p-panel mt-10 Q-panel pos-rel"
            v-if="paper_config.stuff_Q_json.length !== 0"
          >
            <div class="Q-info bg-0084B3 fz14 c-fff">
              材料题（{{ paper_config.stuff_Q_info.zs }}题，{{
                paper_config.stuff_Q_info.fz
              }}分）
            </div>
            <div>
              <stuff-Q
              :request_id="request_id"
                class="cmm"
                v-for="(item, index) in paper_config.stuff_Q_json"
                :key="index"
                :Q="item"
                :id="'stuff' + item.xh"
              />
            </div>
          </div>
        </Col>
        <Col span="6-5">
          <div class="sub-main" :class="{ fixed: scrollNum > 200 }">
            <div class="p-panel Q-index-panel clearfix">
              <div class="mt-10">
                <div class="dtk_text">
                  <a></a>
                  <span>答题卡</span>
                </div>

                <div class="xh-list browser-scroll1">
                  <div
                    class="t_xh"
                    v-if="paper_config.single_Q_json.length !== 0"
                  >
                    <span>单选题</span>
                    <ul class="ul-tabs Q-index-list mt-8">
                      <li
                        v-for="(item, index) in paper_config.single_Q_json"
                        :key="'single' + index"
                        :class="[
                          item.yx_da.length == 0
                            ? ''
                            : item.yx_da.join('') == item.da_arr.join('')
                            ? 'right_li'
                            : 'err_li',
                        ]"
                        @click="scroll2dom('#single' + item.xh)"
                      >
                        {{ item.xh }}
                      </li>
                    </ul>
                  </div>

                  <div
                    class="t_xh"
                    v-if="paper_config.multiple_Q_json.length !== 0"
                  >
                    <span>多选题</span>
                    <ul class="ul-tabs mt-8 Q-index-list">
                      <li
                        v-for="(item, index) in paper_config.multiple_Q_json"
                        :key="'multiple' + index"
                        :class="[
                          item.yx_da.length == 0
                            ? ''
                            : item.yx_da.join('') == item.da_arr.join('')
                            ? 'right_li'
                            : 'err_li',
                        ]"
                        @click="scroll2dom('#multiple' + item.xh)"
                      >
                        {{ item.xh }}
                      </li>
                    </ul>
                  </div>

                  <div
                    class="t_xh"
                    v-if="paper_config.stuff_Q_json.length !== 0"
                  >
                    <span>材料题</span>
                    <ul class="ul-tabs mt-8 Q-index-list">
                      <li
                        v-for="(item, index) in paper_config.stuff_Q_json"
                        :key="'stuff' + index"
                        @click="scroll2dom('#stuff' + item.xh)"
                      >
                        {{ item.xh }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!--footer-->
              <!-- <div class="clearfix mt-24">
                <div class="float-right ">
                  <label class="cursor-pointer">
                    <input type="checkbox" checked="true" class="f-checkbox mr-8" v-model="only_show_wrong_Q">只看错题
                  </label>
                </div>
              </div> -->
            </div>
          </div>
        </Col>
      </Row>
    </div>
     <!-- 暂无数据 -->
    <div class="no-data" v-else></div>
  </div>
</template>

<script src="./this.js"></script>

<style scoped lang="scss" src="./this.scss"></style>
